<html>
	<body>
		<style>
			#container {
				background-color: #FFFFFF;
				width: 100%;
				height: 100%;
			}
		</style>
		<div id="framerate"></div>
		<div id="container"></div>
		<script type="text/javascript" src="../lib/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="../lib/jquery.mousewheel-3.1.3.js"></script>
		<script type="text/javascript" src="../lib/underscore-1.4.3-min.js"></script>
		<script type="text/javascript" src="../lib/kinetic-v4.4.1.js"></script>
		<script src="../lib/color-0.4.1.min.js"></script>
		<script type="text/javascript" src="../src/kinetic.idea.js"></script>
		<script type="text/javascript" src="../src/kinetic.idea.proxy.js"></script>
		<script type="text/javascript" src="../src/kinetic.clip.js"></script>
		<script type="text/javascript" src="../src/kinetic.connector.js"></script>
		<script type="text/javascript" src="../src/observable.js"></script>
		<script type="text/javascript" src="../src/mapjs.js"></script>
		<script type="text/javascript" src="../src/content.js"></script>
		<script type="text/javascript" src="../src/layout.js"></script>
		<script type="text/javascript" src="../src/layout-compressor.js"></script>
		<script type="text/javascript" src="../src/map-model.js"></script>
		<script type="text/javascript" src="../src/kinetic-mediator.js"></script>
		<script type="text/javascript" src="../src/map-toolbar-widget.js"></script>
		<script type="text/javascript" src="../src/png-exporter.js"></script>
		<script type="text/javascript" src="testtree.js"></script>
		<script>
			(function () {
				var container = jQuery('#container'),
				stage = new Kinetic.Stage({
					container: 'container'
				}),
				layer = new Kinetic.Layer(),
				setStageDimensions = function () {
					console.log("setStageDimensions");
					stage.setWidth(container.width());
					stage.setHeight(container.height());
					stage.draw();
				},
				nodes = [],
				moveNodes = function () {
						var i;
						for (i = 0; i < nodes.length; i++) {
							nodes[i].transitionTo({
								x: Math.round(stage.getWidth() / 12) * Math.round(10 * Math.random()),
								y: Math.round(stage.getHeight() / 12) * Math.round(10 * Math.random()),
								easing: 'ease-in-out',
								duration: 0.5
							});
						}
					},
				addNode = function () {
					var node = new Kinetic.Idea({
						level: 2,
						x: 10,
						y: 10,
						mmAttr: {},
						text: 'this is a title for the node ' + i + '. A very special one.'
					});
					if (window.location.hash === '#cache') {
						node = new Kinetic.IdeaProxy(node, stage, layer);
					}
					layer.add(node);
					nodes.push(node);
					var useImages = false;
					$('#nodeCount').text(nodes.length + ' nodes using images:' + useImages);
					if (useImages) {
						node.toImage({
							width: node.getWidth() + 20,
							height: node.getHeight() + 20,
							callback: function (img) {
								var image = new Kinetic.Image({
									x: 0,
									y: 0,
									width: node.getWidth() + 20,
									height: node.getHeight() + 20,
									image: img,
								});
								container.add(image);
								layer.draw();
							}
						});
						node.remove();
					}
				};
				stage.add(layer);
				setStageDimensions();
				for (var i = 0; i < 100; i++) {
					addNode();
				}
				setInterval(moveNodes, 500);
				$(window).resize(setStageDimensions);
			}());
			(function () {
				var oldRequestAnimationFrame = Kinetic.Animation.fixedRequestAnimFrame,
					framerateText = jQuery('#framerate'),
					frames = 0,
					t0 = Date.now();
				window.callme = function () {
					var lapsed = Date.now() - t0;
					frames++;
					if (oldRequestAnimationFrame) {
						oldRequestAnimationFrame.apply(window, arguments);
					}
					if (lapsed > 500) {
						framerateText.text(2 * frames);
						frames = 0;
						t0 = Date.now();
					}
				};
			}());
		</script>
	</body>
</html>
